Frontend column sorting by karinakharchenko · Pull Request #1499 · rocket-admin/rocketadmin

karinakharchenko · 2026-01-13T14:07:03Z

No description provided.

…board table view

…chenko/rocketadmin into order-of-tables-(dnd)

- Add sortable header with dropdown menu for ascending/descending sort - Show sort icon on column header hover, change to active icon when sorted - Add "Set as default" option to persist sort preference across page reloads - Default sort takes priority over URL params on page reload - Clicking selected sort option toggles it off (reverts to default if set) - Style active sort option with gray background highlight Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Style active sort option with rounded highlight background - Auto-remove default sort when user deselects sorting on default column - Disable "Set as default" button until sort order is selected - Add tooltip hint when default button is disabled Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

CLAassistant · 2026-01-13T14:07:13Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

…archenko/rocketadmin into frontend_column_sorting

Copilot

Pull request overview

This pull request implements frontend column sorting functionality with the ability to set default sort preferences and reorder columns via drag-and-drop. The changes introduce a new PersonalTableViewSettings interface to manage user-specific table preferences separate from global table settings.

Changes:

Added sortable column headers with dropdown menus for ascending/descending sort and default sort preferences
Implemented drag-and-drop column reordering in the columns visibility menu
Refactored table settings to separate personal view preferences (ordering, columns view) from global table settings
Added new API endpoint for updating personal table view settings

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 25 comments.

Show a summary per file

File	Description
frontend/src/environments/environment.dev.ts	Updated development API URLs to Tailscale network addresses
frontend/src/app/models/table.ts	Created PersonalTableViewSettings interface and removed ordering/list fields from TableSettings
frontend/src/app/models/ui-settings.ts	Added defaultSort property to TableSettingsUI interface
frontend/src/app/services/ui-settings.service.ts	Modified updateTableSetting to remove table initialization code
frontend/src/app/services/tables.service.ts	Added updatePersonalTableViewSettings method and reformatted error handling
frontend/src/app/components/dashboard/db-tables-data-source.ts	Updated to use table_settings nested object and added defaultSort support
frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts	Implemented sort initialization logic, drag-drop column reordering, and default sort toggle
frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html	Added sortable header UI with dropdown menus and drag-drop column list
frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css	Added styles for sortable headers and draggable column menu items
frontend/src/app/components/dashboard/db-table-view/db-table-settings/*	Removed deprecated column ordering UI and related logic
frontend/src/app/components/dashboard/dashboard.component.ts	Removed UiSettingsService dependency from TablesDataSource initialization

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-20T12:41:51Z

-		this.syncUiSettings().subscribe();
-	}
+  updateTableSetting(connectionId: string, tableName: string, key: string, value: any) {
+    console.log('updateTableSetting')


Missing semicolon at the end of the statement. This is inconsistent with the coding style used throughout the file and could potentially cause issues in certain build configurations.

Suggested change

console.log('updateTableSetting')

console.log('updateTableSetting');

Copilot · 2026-01-20T12:41:52Z

+        }),
+        catchError((err) => {
+          console.log(err);
+          this._notifications.showErrorSnackbar(err.error.message);


Inconsistent error handling - accessing err.error.message directly without optional chaining. If err.error is undefined, this will throw a runtime error. The original code used err.error?.message || err.message for safer error handling.

Copilot · 2026-01-20T12:41:52Z

+          let orderedColumns: TableField[];
+          if (res.table_settings.list_fields.length) {
+            orderedColumns = res.structure.sort((fieldA: TableField, fieldB: TableField) => res.table_settings.list_fields.indexOf(fieldA.column_name) - res.table_settings.list_fields.indexOf(fieldB.column_name));
+          } else {
+            orderedColumns = [...res.structure];
+          };
+
+          if (isTablePageSwitched === undefined) this.columns = orderedColumns
+            .filter (item => item.isExcluded === false)
+            .map((item, index) => {
+              if (res.table_settings.columns_view && res.table_settings.columns_view.length !== 0) {
+                return {
+                  title: item.column_name,
+                  normalizedTitle: this.widgets[item.column_name]?.name || normalizeFieldName(item.column_name),
+                  selected: res.table_settings.columns_view.includes(item.column_name)


The code references res.table_settings.list_fields and res.table_settings.columns_view, but these fields have been moved from TableSettings to PersonalTableViewSettings according to the model changes. This will cause runtime errors if the backend response structure doesn't match these expectations.

Suggested change

let orderedColumns: TableField[];

if (res.table_settings.list_fields.length) {

orderedColumns = res.structure.sort((fieldA: TableField, fieldB: TableField) => res.table_settings.list_fields.indexOf(fieldA.column_name) - res.table_settings.list_fields.indexOf(fieldB.column_name));

} else {

orderedColumns = [...res.structure];

};

if (isTablePageSwitched === undefined) this.columns = orderedColumns

.filter (item => item.isExcluded === false)

.map((item, index) => {

if (res.table_settings.columns_view && res.table_settings.columns_view.length !== 0) {

return {

title: item.column_name,

normalizedTitle: this.widgets[item.column_name]?.name || normalizeFieldName(item.column_name),

selected: res.table_settings.columns_view.includes(item.column_name)

const personalViewSettings = (res as any).personal_table_view_settings || {};

const tableSettings = res.table_settings || {};

const listFields: string[] = personalViewSettings.list_fields ?? tableSettings.list_fields ?? [];

const columnsView: string[] = personalViewSettings.columns_view ?? tableSettings.columns_view ?? [];

let orderedColumns: TableField[];

if (listFields.length) {

orderedColumns = res.structure.sort(

(fieldA: TableField, fieldB: TableField) =>

listFields.indexOf(fieldA.column_name) - listFields.indexOf(fieldB.column_name)

);

} else {

orderedColumns = [...res.structure];

}

if (isTablePageSwitched === undefined) this.columns = orderedColumns

.filter (item => item.isExcluded === false)

.map((item, index) => {

if (columnsView && columnsView.length !== 0) {

return {

title: item.column_name,

normalizedTitle: this.widgets[item.column_name]?.name || normalizeFieldName(item.column_name),

selected: columnsView.includes(item.column_name)

Copilot · 2026-01-20T12:41:53Z

+
+          this.dataColumns = this.columns.map(column => column.title);
+          this.dataNormalizedColumns = this.columns
+            .reduce((normalizedColumns, column) => (normalizedColumns[column.title] = column.normalizedTitle, normalizedColumns), {})


Missing semicolons at the end of multiple statements. This is inconsistent with TypeScript coding standards.

Suggested change

.reduce((normalizedColumns, column) => (normalizedColumns[column.title] = column.normalizedTitle, normalizedColumns), {})

.reduce((normalizedColumns, column) => (normalizedColumns[column.title] = column.normalizedTitle, normalizedColumns), {});

Copilot · 2026-01-20T12:41:53Z

+    return totalActionsCount === 0 ? '0' : `${lengthValue}px`
+  }
+
+  changleColumnList(connectionId: string, tableName: string) {
+    this.displayedDataColumns = (filter(this.columns, column => column.selected === true)).map(column => column.title);
+    if (this.keyAttributes.length) {
+      this.displayedColumns = ['select', ...this.displayedDataColumns, 'actions' ]
+    } else {
+      this.displayedColumns = [...this.displayedDataColumns];
+    };
+  }
+
+  getQueryParams(row, action) {
+    const params = Object.fromEntries(this.keyAttributes.map((column) => {
+      if (this.foreignKeysList.includes(column.column_name)) {
+        const referencedColumnNameOfForeignKey = this.foreignKeys[column.column_name].referenced_column_name;
+          return [column.column_name, row[column.column_name][referencedColumnNameOfForeignKey]];
+        };


Missing semicolons at the end of statements on lines 319, 328, and 336. This is inconsistent with TypeScript coding standards.

Copilot · 2026-01-20T12:41:57Z

+			console.log('loading$ changed:', loading, 'sort.active:', this.sort?.active, 'sort.direction:', this.sort?.direction);
+
+			if (!loading && this.tableData.defaultSort !== undefined) {
+				// Update defaultSort reference whenever data loads
+				this.defaultSort = this.tableData.defaultSort;
+
+				console.log('DbTableViewComponent tableData loaded:', this.tableData);
+				console.log('DbTableViewComponent tableData.defaultSort loaded:', this.tableData.defaultSort);
+
+				// Only initialize sort on first load (or after table switch when sortInitialized was reset)
+				if (!this.sortInitialized) {
+					this.sortInitialized = true;
+
+					// Initialize sort based on priority: URL params > default sort
+					if (urlSortActive && urlSortDirection) {
+						// Use sort from URL
+						this.sort.active = urlSortActive;
+						this.sort.direction = urlSortDirection.toLowerCase() as 'asc' | 'desc';
+					} else if (this.defaultSort) {
+						// Use default sort if no URL params
+						this.sort.active = this.defaultSort.column;
+						this.sort.direction = this.defaultSort.direction;
+					}
+				}
+
+				console.log('After loading complete - sort.active:', this.sort?.active, 'sort.direction:', this.sort?.direction);
+			}


Console.log statements left in production code. These debug logs should be removed before merging to production as they can impact performance and expose internal implementation details.

Copilot · 2026-01-20T12:41:58Z

+  }
+
+  onColumnVisibilityChange() {
+    this.tableData.changleColumnList(this.connectionID, this.name);


Method name changleColumnList contains a typo - it should be changeColumnList. This is a pre-existing typo but calling it from new code perpetuates the naming issue.

Copilot · 2026-01-20T12:41:58Z

+    // if (!this.settings.connections[connectionId].tables[tableName]) {
+    //   this.settings.connections[connectionId].tables[tableName] = { shownColumns: [] };
+    // }
+    this.settings.connections[connectionId].tables[tableName][key] = value;


Commented out code that initializes the table object will cause a runtime error. The code tries to access this.settings.connections[connectionId].tables[tableName] on line 57, but this object may not exist since the initialization code is commented out. This will throw an error when trying to set a property on undefined.

Suggested change

// if (!this.settings.connections[connectionId].tables[tableName]) {

// this.settings.connections[connectionId].tables[tableName] = { shownColumns: [] };

// }

this.settings.connections[connectionId].tables[tableName][key] = value;

const connectionSettings = this.settings.connections[connectionId];

if (!connectionSettings.tables) {

connectionSettings.tables = {};

}

if (!connectionSettings.tables[tableName]) {

connectionSettings.tables[tableName] = { shownColumns: [] };

}

connectionSettings.tables[tableName][key] = value;

Copilot · 2026-01-20T12:41:58Z

+
+          this.dataColumns = this.columns.map(column => column.title);
+          this.dataNormalizedColumns = this.columns
+            .reduce((normalizedColumns, column) => (normalizedColumns[column.title] = column.normalizedTitle, normalizedColumns), {})


Avoid automated semicolon insertion (95% of all statements in the enclosing function have an explicit semicolon).

Suggested change

.reduce((normalizedColumns, column) => (normalizedColumns[column.title] = column.normalizedTitle, normalizedColumns), {})

.reduce((normalizedColumns, column) => (normalizedColumns[column.title] = column.normalizedTitle, normalizedColumns), {});

Copilot · 2026-01-20T12:41:59Z

+                  to: 'https://docs.rocketadmin.com/'
+                }
+              ]
+            }


Avoid automated semicolon insertion (95% of all statements in the enclosing function have an explicit semicolon).

karinakharchenko and others added 16 commits November 3, 2025 15:46

order columns

b4b1e5a

Implement column sorting and update visibility change handler in dash…

34092aa

…board table view

1

011d5f6

1

1eabe74

fix access to browser from container

e657fcf

fix access to browser from container

f25dc24

table view: save ersonal columns order

b018750

table view: save columns visibility

0f44430

Merge branch 'main' into order-of-tables-(dnd)

1925660

Merge branch 'main' into order-of-tables-(dnd)

7252f67

dev vars: use prod apiRoot

f849852

Merge branch 'order-of-tables-(dnd)' of https://github.com/karinakhar…

c24d671

…chenko/rocketadmin into order-of-tables-(dnd)

fix TableSettingsUI type

ae1e165

fix unit tests

17477b5

lyubov-voloshko added 10 commits January 15, 2026 12:59

Merge branch 'order-of-tables-(dnd)' into frontend_column_sorting

25659b4

table view: save sorting settings on server and remove ui settings using

3c44bef

Merge branch 'main' into frontend_column_sorting

9b219f5

fixes

4578215

table view: fix sorting mark on table switching

9c016c9

table settings: remove unused list ordering vars

f1c7b42

fix access to browser from container

30221b4

fix access to browser from container

c509647

Merge branch 'frontend_column_sorting' of https://github.com/karinakh…

7717c34

…archenko/rocketadmin into frontend_column_sorting

Merge branch 'main' into frontend_column_sorting

deb2368

lyubov-voloshko marked this pull request as ready for review January 20, 2026 12:36

Copilot AI review requested due to automatic review settings January 20, 2026 12:36

lyubov-voloshko enabled auto-merge January 20, 2026 12:36

Copilot started reviewing on behalf of lyubov-voloshko January 20, 2026 12:36 View session

lyubov-voloshko merged commit f6f553c into rocket-admin:main Jan 20, 2026
10 of 11 checks passed

Copilot AI reviewed Jan 20, 2026

View reviewed changes

	console.log('updateTableSetting')
	console.log('updateTableSetting');

	.reduce((normalizedColumns, column) => (normalizedColumns[column.title] = column.normalizedTitle, normalizedColumns), {})
	.reduce((normalizedColumns, column) => (normalizedColumns[column.title] = column.normalizedTitle, normalizedColumns), {});

-    // if (!this.settings.connections[connectionId].tables[tableName]) {
-    //   this.settings.connections[connectionId].tables[tableName] = { shownColumns: [] };
-    // }
-    this.settings.connections[connectionId].tables[tableName][key] = value;
+    const connectionSettings = this.settings.connections[connectionId];
+    if (!connectionSettings.tables) {
+      connectionSettings.tables = {};
+    }
+    if (!connectionSettings.tables[tableName]) {
+      connectionSettings.tables[tableName] = { shownColumns: [] };
+    }
+    connectionSettings.tables[tableName][key] = value;

Uh oh!

Conversation

karinakharchenko commented Jan 13, 2026

Uh oh!

CLAassistant commented Jan 13, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants